<template>
	<uni-popup ref="coupon_pop" @maskClick="handleMastClick">
		<view class="coupon_pop" :class="'theme'+theme">
			<image class="bg" :src="'/uni_modules/liiy-coupon-popup/static/cou_bg' + theme +'.png'"></image>
			<view class="title">{{title}}</view>
			<view class="content">{{content}}</view>

			<view class="con_boxDiv">
				<view class="con_box" v-for="item in CouponList">
					<view class="box_a" v-if="item.type=='offerMinusCoupons'">
						<view class="box_a_a">
							<text>￥</text>
							<text>{{item.price}}</text>
						</view>
						<text v-if="minPrice" class="box_a_b">满{{item.minPrice}}{{item.operationType == '满额'?'元':'件'}}可用</text>
					</view>
					<view class="box_a" v-if="item.type=='offerFoldCoupons'">
						<view class="box_a_a">
							<text>{{Number(item.price)*10}}折</text>
						</view>
						<text v-if="minPrice" class="box_a_b">满{{item.minPrice}} {{item.operationType == '满额'?'元':'件'}}可用</text>
					</view>

					<view class="box_a"  v-if="item.type=='offerCoinCoupons'">
						<view class="box_a_a">
							<text>数量：</text>
							<text>{{item.num}}</text>
						</view>
						<text class="box_a_b">可兑换：{{item.goodsName}}</text> 
					</view>


					<view class="box_b"></view>
					<view class="box_c">
						<view class="box_c_1">{{item.name}}</view>
						<view class="box_c_2">有效期 {{item.endData ? item.endData.slice(0,10) :'无限制'}}</view>
					</view>
				</view>


			</view>
			<view class="note">领取后可在我的优惠券中查看</view>
			<view class="btn2" @click="get($event)">
				<image class="bg" :src="'/uni_modules/liiy-coupon-popup/static/cou_btn_' + theme +'.png'"></image>
				<text>立即领取</text>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'LiiyCouponPop',
		data() {
			return {
				show: false
			};
		},
		props: {
			theme: {
				type: String,
				required: false,
				default: '1'
			},
			title: {
				type: String,
				required: false,
				default: ''
			},
			content: {
				type: String,
				required: true,
				default: ''
			},
			price: {
				type: String,
				required: true
			},
			minPrice: {
				type: String,
				required: false,
				default: '0'
			},
			name: {
				type: String,
				required: true
			},
			endData: {
				type: String,
				required: false,
				default: '无限制'
			},
			CouponList: {
				type: Array,
				required: false,
			}
		},
		watch: {
			show(val) {
				if (val) {
					this.$refs.coupon_pop.open()
				} else {
					this.$refs.coupon_pop.close()
				}
			}
		},
		methods: {
			get(event) {
				this.$emit('getClick', event)
			},
			handleMastClick() {
				this.show = false
			}
		}
	}
</script>

<style scoped>
	.theme2 .con_boxDiv {
		overflow-y: scroll;
		padding-top: 25rpx;
		/* min-height: 250rpx; */
		max-height: 250rpx;
		height: 250rpx;
	}

	.theme1 .con_boxDiv {
		min-height: 228rpx;
		max-height: 350rpx;

		overflow-y: scroll;
		padding-top: 20rpx;
	}

	.theme1 {
		width: 670rpx;
		height: 695rpx;
	}

	.theme1 .title {
		display: none;
	}

	.theme1 .btn2 {
		width: 282rpx;
		height: 80rpx;
		position: relative;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		top: 60rpx;
	}

	.theme1 .btn2 text {
		font-size: 36rpx;
		font-weight: 500;
		color: #E62335;
		margin-top: 14rpx;
	}

	.theme1 .content {
		margin-top: 188rpx;
		color: #FDC065;
		font-size: 48rpx;
	}

	.theme1 .con_box {
		margin-top: 20rpx;
		width: 452rpx;
		border-radius: 8rpx;
		height: 134rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		background-color: #fff;
		display: flex;
	}

	.theme1 .note {
		color: #fff;
		font-size: 26rpx;
		position: relative;
		top: 30rpx;


	}

	.theme1 .box_a {
		width: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #FB4B4E;
		background-image: radial-gradient(circle at right top, #F75F49, #F75F49 10px, transparent 10px),
			radial-gradient(circle at right bottom, #DB3939, #DB3939 10px, transparent 10px);
	}

	.theme1 .box_a_a {
		font-size: 32rpx;
		font-weight: bold;
	}

	.theme1 .box_a_a text:nth-child(1) {
		font-size: 24rpx;
	}

	.theme1 .box_a_b {
		font-size: 22rpx;
		margin-top: 4rpx;

		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100px;
	}

	.theme1 .box_b {
		height: 80rpx;
		border-left: 1px dashed #FB4B4E;
		margin-top: 28rpx;
		margin-left: -2rpx;
	}

	.theme1 .box_c {
		width: 290rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FB4B4E;
		padding: 0 24rpx;
		background-image: radial-gradient(circle at left top, #F75F49, #F75F49 10px, transparent 10px),
			radial-gradient(circle at left bottom, #DB3939, #DB3939 10px, transparent 10px);
	}

	.theme1 .box_c_1 {
		color: #000000;
		font-size: 28rpx;
	}

	.theme1 .box_c_2 {
		color: #999999;
		font-size: 22rpx;
		margin-top: 14rpx;
		padding-top: 14rpx;
		border-top: 1px dashed #999
	}

	.theme2 {
		width: 695rpx;
		height: 648rpx;
	}

	.theme2 .btn2 {
		width: 297rpx;
		height: 80rpx;
		position: relative;
		display: flex;
		justify-content: center;
		top: 50rpx;
	}

	.theme2 .btn2 text {
		font-size: 36rpx;
		font-weight: 500;
		color: #C00E30;
		margin-top: 14rpx;
	}

	.theme2 .title {
		margin-top: 6rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.theme2 .content {
		margin-top: 24rpx;
		color: #A66F12;
		font-size: 40rpx;
	}

	.theme2 .con_box {
		margin-top: 20rpx;
		width: 452rpx;
		border-radius: 8rpx;
		height: 134rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		background-color: #fff;
		display: flex;
	}

	.theme2 .note {
		color: #D91338;
		font-size: 26rpx;
		margin-top: 24rpx;

		position: relative;
		top: 220rpx;
	}

	.theme2 .box_a {
		width: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #FB4B4E;
		background-image: radial-gradient(circle at right top, #faebd4, #faebd4 10px, transparent 10px),
			radial-gradient(circle at right bottom, #f8e0b4, #f8e0b4 10px, transparent 10px);
	}

	.theme2 .box_a_a {
		font-size: 32rpx;
		font-weight: bold;
	}

	.theme2 .box_a_a text:nth-child(1) {
		font-size: 24rpx;
	}

	.theme2 .box_a_b {
		font-size: 22rpx;
		margin-top: 4rpx;

		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100px;
	}

	.theme2 .box_b {
		height: 80rpx;
		border-left: 1px dashed #FB4B4E;
		margin-top: 28rpx;
		margin-left: -1rpx;
	}

	.theme2 .box_c {
		width: 290rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FB4B4E;
		padding: 0 24rpx;
		background-image: radial-gradient(circle at left top, #faebd4, #faebd4 10px, transparent 10px),
			radial-gradient(circle at left bottom, #f8e0b4, #f8e0b4 10px, transparent 10px);
	}

	.theme2 .box_c_1 {
		color: #000000;
		font-size: 28rpx;
	}

	.theme2 .box_c_2 {
		color: #999999;
		font-size: 22rpx;
		margin-top: 14rpx;
		padding-top: 14rpx;
		border-top: 1px dashed #999
	}

	.coupon_pop {
		position: relative;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.theme2 image {
		width: 100%;
		max-height: 117%;
		min-height: 100%;
		position: absolute;
		z-index: -1;
	}

	.theme1 image {
		width: 100%;
		max-height: 102%;
		min-height: 99%;
		position: absolute;
		z-index: -1;
	}
</style>